//###################################################################
//#    CUSTOMIZABLE JAVASCRIPT COLOR PICKER V 0.1
//#    AUTHOR: JUSTIN PALMER
//#    WEBSITE HTTP://WWW.ISOLATED-DESIGNS.NET/CORE
//#    DESCRIPTION:  A CUSTOM COLOR PICKER THAT WILL ALLOW YOU TO EASILY DEFINE UNLIMITED 
//#                  CUSTOM COLOR PALLETES.  SIMPLY ADD ANOTHER CASE TO THE SWITCH STATEMENT
//#                  AND FILL IN YOUR COLOR VALUES.  THEN ADD THE VALUE AND NAME TO THE SELECT MENU.
//#    COMPATIBLE BROWSERS:  TESTED ON MSIE 6, FIREFOX 0.9, OPERA 7...IF YOU USE A DIFFERENT BROWSER
//#    THATS NOT LISTED HERE AND WOULD LIKE TO LET ME KNOW IF IT WORKS OR DOESN'T, PLEASE DROP A COMMENT
//#####################################################################

var _jsColorPickerPalette = Array ('','','');
// variable to store the colors selected by the user. I hate having that as globals

	function changecss(theClass,element,value) {
	//documentation for this script at http://www.shawnolson.net/a/503/
	 var cssRules;
	 if (document.all) {
	  cssRules = 'rules';
	 }
	 else if (document.getElementById) {
	  cssRules = 'cssRules';
	 }
	 for (var S = 0; S < document.styleSheets.length; S++){
	  for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
	   if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
	    document.styleSheets[S][cssRules][R].style[element] = value;
	   }
	  }
	 }	
	}

//Initialize the Color Menu, Right now it defaults to common
	function initPalette(id)
	{
	colors = getColors('common');
  var palette = document.getElementById(id);
  palette.style.display = "block";
 
	buildColorMenu(20,colors.length, colors, 'palette1');
	buildColorMenu(20,colors.length, colors, 'palette2');
	buildColorMenu(20,colors.length, colors, 'palette3');
	}
	
	//Swaps the pallte based on user selection
	function swapPallete(colors,id)
	{
		var root = document.getElementById('object1');
		root.innerHTML = '';
		var colors = getColors(colors);
		buildColorMenu(20, colors.length, colors, id);
	}
	
//Generate An Array of Hex colors based on the pallete
function getColors(pallete)
{
	switch(pallete)
	{
		case 'grayscale' :
		    //GRAYSCALE COLORS CAN EASILY BE GENERATED CONSIDERING THERE RBG VALUES
			//ARE EQUAL.
			colors = generateGrayScale();
			break
		case 'common' :
			var colors = Array(
 				'#EDEDED', '#E4E4E4', '#DADADA', '#D1D1D1',
				'#C7C7C7', '#BDBDBD', '#B3B3B3', '#A8A8A8', '#9E9E9E',
				'#FF0010', '#FFFE38', '#76FF36', '#00FFFF', '#002CFD',
				'#EF00FD', '#FB0034', '#FFF125', '#00AE5F', '#00B8EF',
				'#00429A', '#F30094', '#939393', '#878787', '#7B7B7B',
				'#6E6E6E', '#626262', '#535353', '#444444', '#343434',
				'#202020', '#000000', '#FF9C86', '#FFB18D', '#FFC997',
				'#FFF7A4', '#D8E2A6', '#B5D8A6', '#91CFA6', '#78D3CD',
				'#08D6F7', '#63AFDA', '#709DCE', '#7D8CC2', '#9D90C2',
				'#F8A1C6', '#FE9EA5', '#FF715C', '#FF9363', '#FFB26A',
				'#FFF478', '#C3D680', '#96C981', '#55BF84', '#00C3BB',
				'#00C7F3', '#0097CE', '#0080BC', '#416AAD', '#7E6BAF',
				'#A66EAF', '#F475AF', '#FB7388', '#FB0034', '#FF6A35',
				'#FF9936', '#FFF125', '#ADCB52', '#62BC5B', '#00AE5F',
				'#00B2A6', '#00B8EF', '#0080C1', '#0063AB', '#00429A',
				'#593C99', '#923397', '#F30094', '#F90066', '#AD001F',
				'#B34A20', '#B76B21', '#C4A621', '#748F3B', '#408641',
				'#007E46', '#008076', '#0083AB', '#005A89', '#00437B',
				'#00256E', '#421E6C', '#68006B', '#A90068', '#AC0047',
				'#8A0000', '#8D3A00', '#905400', '#998402', '#58712A',
				'#2E6B31', '#006535', '#00665E', '#006988', '#00456D',
				'#003162', '#000258', '#2F0056', '#540054', '#870052',
				'#8A0035', '#D3B7A1', '#A88E80', '#816E64', '#625550',
				'#463D3B', '#D6A279', '#B8855E', '#9E6D49', '#875735',
				'#744524'
				);
				break
				
				//DEFINE YOUR CUSTOM PALLETES HERE
				//case 'mycustom' :
				// var colors = Array('#333333', '#FFFFFF');
				// return colors;
		default :
			//Nada
	}
	return colors;
}

	
	//The Work horse that does all the bulding
	function buildColorMenu(num_rows, total_cells, colors, rootID)
	{
		if(typeof colors != 'object'){ alert('Error: Colors Must Be An Array');}
		var root = document.getElementById(rootID);
    root.innerHTML ="";
		var table = document.createElement('table');
		table.id = 'swatch';
		table.cellpadding = 0;
		table.cellspacing = 1;
		root.appendChild(table);
		var tbody = document.createElement('tbody');
		var tr = document.createElement('tr');
		tbody.appendChild(tr);
		table.appendChild(tbody);
		var row = tr;
		for(var i = 0; i < total_cells; i++)
		{
			if( (i != 0) && ( i % num_rows ) == 0) {
				row = tbody.appendChild(document.createElement('tr'));
				} 
				td = document.createElement('td')
				td.id = colors[i];
				td.onclick = showColor;
				td.onmouseover = previewColor;
				td.style.background = colors[i];
				row.appendChild(td);
		}
		
		tfoot = document.createElement('tfoot');
		return table;
	}
	
	function generateGrayScale()
	{
		var colors = Array();
		for(var i = 0; i < 256; i++)
		{
			hex = decToHex(i);
			rgb = '#' + hex + hex + hex;
			colors.push(rgb);
		}
		return colors.reverse();
	}

	
	function previewColor()
  {
	 var swatch = document.getElementById(this.id);
   var sample = document.getElementById("sample"+this.parentNode.parentNode.parentNode.parentNode.id);
//   alert (sample.id);
   sample.style.backgroundColor = swatch.id;

  }

	function showColor()
	{

	 var swatch = document.getElementById(this.id);
   var colorID = this.parentNode.parentNode.parentNode.parentNode.id;
   switch (colorID)
   {
   case 'palette1': setPalette1 (swatch.id);break;
   case 'palette2': setPalette2 (swatch.id);break;
   case 'palette3': setPalette3 (swatch.id);break;
   }
  }

   function setColor (index,colorID)
   {
      _jsColorPickerPalette[index]=colorID.substring(1,7);

      sydesypalette=document.getElementById('setpalette');
      if (undefined != sydesypalette)
        sydesypalette.href="/user/preferences/set/palette/"+_jsColorPickerPalette[0]+"-"+_jsColorPickerPalette[1]+"-"+_jsColorPickerPalette[2];
   }

   function setPalette(color1,color2,color3)
   {
     setPalette1 (color1);
     setPalette2 (color2);
     setPalette3 (color3);
   }

   function setPalette1 (colorID)
   {
//     changecss ("","color",colorID);
     setColor (0,colorID);
		 changecss (".d1 #logo a","backgroundColor",colorID);
		 changecss (".a1 #pathbar a","color",colorID);
		 changecss (".d1 #toolbar","backgroundColor",colorID);
		 changecss (".d1 #menu li","backgroundColor",colorID);
		 changecss ("* html #menu li","backgroundColor",colorID);
		 changecss (".d1 #menu ul ul","borderColor",colorID);
//		 changecss (".d1 #logo img","backgroundColor",colorID);
		 changecss (".d1 #slogan","borderColor",colorID);
		 changecss (".d1 #sidebar li a","borderColor",colorID);
		 changecss (".d1 #menu","borderColor",colorID);
		 changecss (".d1 #topmenu li","borderColor",colorID);
		 changecss (".d1 #topmenu","borderColor",colorID);
		 changecss (".d1 div.intro","color",colorID);
		 changecss ("h1","color",colorID);
		 changecss (".country","color",colorID);
		 changecss (".region","color",colorID);
  }
   
   function setPalette2 (colorID)
   {
     setColor (1,colorID);
//     changecss ("","color",colorID);
     changecss (".a1 #sidebar h3","backgroundColor",colorID);
		 changecss (".a1 #content a","color",colorID);
		 changecss (".a1 #sidebar li a:hover","backgroundColor",colorID);
   }

   function setPalette3 (colorID)
   {
     setColor (2,colorID);
//     changecss ("","color",colorID);
     changecss ("#content","backgroundColor",colorID);
//     changecss ("#sidebar","backgroundColor",colorID);
//     changecss ("#menu","backgroundColor",colorID);
     changecss ("#topmenu","backgroundColor",colorID);
     changecss ("#pathbar","backgroundColor",colorID);
   }

//Utility Scrtip to Convert decimal to hex value	 
function decToHex(dec)
{
  var hexStr = "0123456789ABCDEF";
  var low = dec % 16;
  var high = (dec - low)/16;
  hex = "" + hexStr.charAt(high) + hexStr.charAt(low);
  return hex;
}